<template>
	<div class="content-box">
		<el-form ref="menuFormRef" :model="menuForm" :rules="rules" label-width="140px">
			<el-form-item label="标题" prop="title" required>
				<el-input v-model="menuForm.title" />
			</el-form-item>
			<el-form-item label="父级" prop="parentId">
				<el-select v-model="menuForm.parentId">
					<el-option label="Zone one" value="shanghai" />
					<el-option label="Zone two" value="beijing" />
				</el-select>
			</el-form-item>
			<el-form-item label="链接地址" prop="linkUrl">
				<el-input v-model="menuForm.linkUrl" type="textarea" maxlength="500" show-word-limit />
			</el-form-item>
			<el-form-item label="打开方式" prop="openType">
				<el-radio-group v-model="menuForm.openType">
					<el-radio label="当前窗口" value="cur" />
					<el-radio label="新窗口" value="new" />
				</el-radio-group>
			</el-form-item>
			<el-form-item label="状态" prop="status">
				<el-switch v-model="menuForm.status" active-text="正常" inactive-text="停用" />
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="submitForm">提交</el-button>
				<el-popconfirm title="确定删除此菜单吗?">
					<template #reference>
						<el-button type="danger" plain>删除</el-button>
					</template>
				</el-popconfirm>
			</el-form-item>
		</el-form>
	</div>
</template>
<script setup lang="ts" name="MenuForm">
import { reactive, ref } from "vue";
import { checkPhoneNumber } from "@/utils/eleValidate";
import type { FormInstance, FormRules } from "element-plus";
import { ElMessage } from "element-plus";

const menuFormRef = ref<FormInstance>();
const menuForm = ref({
	title: "",
	parentId: "",
	linkUrl: "",
	openType: "",
	status: ""
});

// 接收父组件传过来的参数
const acceptParams = (params: any): void => {
	menuForm.value = params;
};

const rules = reactive<FormRules>({
	name: [
		{ required: true, message: "Please input Activity name", trigger: "blur" },
		{ min: 3, max: 5, message: "Length should be 3 to 5", trigger: "blur" }
	],
	phone: [{ required: true, validator: checkPhoneNumber, trigger: "blur" }],
	region: [
		{
			required: true,
			message: "Please select Activity zone",
			trigger: "change"
		}
	],
	date1: [
		{
			type: "date",
			required: true,
			message: "Please pick a date",
			trigger: "change"
		}
	],
	date2: [
		{
			type: "date",
			required: true,
			message: "Please pick a time",
			trigger: "change"
		}
	],
	resource: [
		{
			required: true,
			message: "Please select activity resource",
			trigger: "change"
		}
	],
	desc: [{ required: true, message: "Please input activity form", trigger: "blur" }]
});

const submitForm = async (formEl: FormInstance | undefined) => {
	if (!formEl) return;
	await formEl.validate((valid, fields) => {
		if (valid) {
			ElMessage.success("提交的数据为 : " + JSON.stringify(menuForm));
		} else {
			console.log("error submit!", fields);
		}
	});
};
defineExpose({
	acceptParams
});
</script>

<style scoped lang="scss">
.content-box {
	box-sizing: border-box;
	padding: 10px 20px 0 0;
	.el-form {
		width: 100%;
	}
}
.text-center {
	text-align: center;
}
</style>
